<template>
  <div class="home">
    <!-- 首页 -->
    <el-container class="home-container">
      <!-- 头部 -->
      <el-header>
        <!-- 标题 -->
        <h1>后台管理系统</h1>
        <!-- 退出按钮 -->
        <el-button type="info" plain @click="logout">退出</el-button>
      </el-header>
      <!-- 内容容器 -->
      <el-container>
        <!-- 侧边栏 -->
        <el-aside :width="isCollapse ? '65px' : '200px'">
          <!--水平折叠收起菜单  -->
          <div class="toggle-button" @click="toggleCollapse">
            <i class="el-icon-s-fold" v-if="isCollapse == false"></i>
            <i class="el-icon-s-unfold" v-else-if="isCollapse == true"></i>
          </div>
          <!-- 菜单 -->
          <el-row class="tac">
            <el-col :span="24">
              <el-menu
                :default-active="$route.path"
                router
                :collapse="isCollapse"
                :collapse-transition="false"
                class="el-menu-vertical-demo"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                :unique-opened="true"
              >
                <!-- 一级菜单 -->
                <el-submenu
                  v-for="item in menusList"
                  :key="item.id"
                  :index="item.id + ''"
                >
                <!-- 插槽 -->
                  <template slot="title">
                    <!-- 图标 -->
                    <i :class="iconsObj[item.id]" class="Levelicon"></i>
                    <!-- 文本 -->
                    <span>{{ item.authName }}</span>
                  </template>
                  <!-- 二级菜单 -->
                  <el-menu-item
                    v-for="son in item.children"
                    :key="son.id"
                    :index="'/' + son.path"
                  >
                  <!-- 图标 -->
                    <i class="el-icon-menu"></i>
                    <!-- 文本 -->
                    <span slot="title">{{ son.authName }}</span>
                  </el-menu-item>
                </el-submenu>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <!-- 主要内容 -->
        <el-main>
          <router-view> </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      // 列表数组
      menusList: [],
      isCollapse: false,
      iconsObj: {
        125: "iconfont icon-user",
        103: "iconfont icon-tijikongjian",
        101: "iconfont icon-shangpin",
        102: "iconfont icon-danju",
        145: "iconfont icon-baobiao",
      },
    };
  },
  // 方法
  methods: {
    // 退出登录
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/login");
      this.$message.success("成功退出");
    },
    // 水平折叠收起菜单
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    
  },
  created() {
    // 获取列表数据
    this.$http.get("/menus").then((res) => {
      console.log(res);
      this.menusList = res.data.data;
    });
  },
};
</script>
<style scoped>
.home {
  height: 100%;
}
.home-container {
  height: 100%;
}
.toggle-button {
  background-color: #4a5064;
  line-height: 30px;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
  color: #fff;
  font-size: 20px;
}
.el-menu {
  border-right: none;
}
.el-header {
  background-color: #373d41;
  color: rgb(133, 133, 133);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-aside {
  background-color: #545c64;
  color: #333;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}
.Levelicon{
  margin: 0 10px;
}
</style>
